<template>
<div class="trace">
  <div v-if="show" class="trace" style="width: 100%;">
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="(item, label) in trace" :label="label" :name="label"  :key="label">
        <div class="trace-tab-content">
          <ol style="padding: 0; margin:0">
            <li v-for="v in item">{{v}}</li>
          </ol>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="trace-close" @click="show = false" ><img style="vertical-align:top;" src="" /></div>
  </div>
  <div class="trace-open" v-if="!show" @click="show = true">
    <div class="trace-open-panel">Trace</div>
    <img width="48" style="" title="ShowPageTrace" src="">
  </div>
</div>
</template>

<script>

export default {
  props: {
    trace: Object
  },
  data () {
    return {
      show: false,
      activeName: ''
    };
  },
  created () {
    // this.activeName = this.trace[0].label
  }
};
</script>

<style scoped>
  .trace {
    position: fixed;
    bottom:0;
    right:0;
    z-index: 999999;
  }
  .el-tabs {
    background:white;
    margin-right: 20px;
    height: 250px;
  }
  .el-tabs__nav {
    height:48px;
    border-bottom:1px solid #ececec;
    border-top:1px solid #ececec;
    font-size:16px;
  }
  .el-tabs__item {
    color:rgb(153,153,153);
    height:48px;
    line-height:30px;
    cursor:pointer;
    font-weight:700;
  }
  .el-tab-pane {
    overflow:auto;
    height:212px;
    padding:0;
    line-height: 24px;
  }
  .el-tab-pane li {
    border-bottom:1px solid #EEE;
    font-size:14px;
    padding:0 12px;
    color: #000;
    text-align:left;
    font-family:'微软雅黑';
  }
  .trace-close {
    text-align:right;
    height:15px;
    position:absolute;
    top:10px;
    right:12px;
    cursor:pointer;
  }
  .trace-open {
    height:48px;
    float:right;
    text-align:right;
    overflow:hidden;
    position:fixed;
    bottom:0;right:0;
    color:#000;
    line-height:30px;
    cursor:pointer;
  }
  .trace-open-panel {
    background:#232323;
    color:#FFF;
    padding:0 6px;
    float:right;
    line-height:48px;
    font-size:14px;
  }
</style>

